<aside class="right-side">                
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Quản lý
            <small>Chi tiết thu chi</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i>Trang chủ</a></li>
           <li class="active">Chi tiết thu chi</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12"> 
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">Chi tiết thu chi</h3>                     
                    </div>
                    <div class="box-body table-responsive">
                        <div id="example1_wrapper" class="dataTables_wrapper form-inline" role="grid">

                            <table id="example1" class="table table-bordered table-hover dataTable" aria-describedby="example1_info">
                            <thead>
                                <tr role="row"><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 251px;">Thu</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 230px;">Số tiền</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 251px;">Chi</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 230px;">Số tiền</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 147px;"></th></tr>
                            </thead>
                            
                        <tbody role="alert" aria-live="polite" aria-relevant="all">
                            <?php 
                            $earn_value_total = 0;
                            $spend_value_total = 0;
                             if(count($daily_report_details) > 0) {
                                foreach ($daily_report_details as $dlr) { ?>
                                    <tr id="<?php echo $dlr->id;?>">
                                        <td class=" "><?php echo $dlr->earn_name;?></td>
                                        <td class=" "><?php echo $dlr->earn_value;?></td>
                                         <td class=" "><?php echo $dlr->spend_name;?></td>
                                        <td class=" "><?php echo $dlr->spend_value;?></td>
                                        <td><button onclick="add()" class="btn btn-primary btn-flat">Thêm</button><br/><button onclick="edit(<?php echo $dlr->id; ?>)" class="btn btn-info btn-flat">&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/><button onclick="delete_row(<?php echo $dlr->id; ?>)" class="btn btn-danger btn-flat">&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button></td>
                                    </tr>
                                    <?php $earn_value_total += $dlr->earn_value;
                                          $spend_value_total += $dlr->spend_value;

                                     }} else { ?>
                                    <tr id="null">
                                        <td class=" sorting_1">Không có dữ liệu</td>
                                        <td class=" "></td>
                                        <td class=" "></td>
                                        <td class=" "></td>
                                    <td><button onclick="add()" class="btn btn-primary btn-flat">Thêm</button><br/><button class="btn btn-info btn-flat" disable>&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/><button class="btn btn-danger btn-flat" disable>&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button></td>
                                </tr>
                                <?php } ?>
                                <tr>
                                    <td style="text-indent: -99999px">zzzzzzzzzzzzzzzzzz</td>
                                    <td>Tổng thu: <?php echo $earn_value_total;?></td>
                                    <td></td>
                                    <td>Tổng chi: <?php echo $spend_value_total;?></td>
                                    <td></td>
                                </tr>
                            </tbody></table>
                        </div>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div>
        </div>
    </section><!-- /.content -->
</aside>

<script type="text/javascript">
    var dlp_id = <?php echo $dlp_id;?>;

    //get base url;
    var earn_value_total = <?php echo $earn_value_total;?>;
    var spend_value_total = <?php echo $spend_value_total;?>;

    var base_url = '<?php echo base_url();?>';

    function onload() {
        $(document ).ready(function() {

            var total_row = ['zzzzzzzzzzzzzzzzzzzzz', 
                    'Tổng thu: ' + earn_value_total,
                    '',
                    'Tổng chi: ' + spend_value_total,
                    ''];
            var t = $('#example1').DataTable();
            t.row.add(total_row).draw();

            $('#example1 > tbody > tr:last').attr('id', 'total_row');
            $('#example1 > tbody > tr:last').find('td:first').css({'text-indent' : '-99999px'});
        });
    }
    //------------------------------- add data row -----------------------------------
    function add () {
        var newRow = '<tr id="new_row"><td><input'
            + ' type="text" id="earn_name" class="form-control"/></td>' 
            + '<td><input type="text" id="earn_value" class="form-control"/></td>'
            + '<td><input type="text" id="spend_name" class="form-control"/></td>'
            + '<td><input type="text" id="spend_value" class="form-control"/></td>'
            + '<td><button onclick="ok_add()"'
            + 'class="btn btn-primary btn-flat">Đồng ý' 
            + '</button>&nbsp;&nbsp;<button onclick="cancle_add()"'
            + 'class="btn btn-danger btn-flat">Hủy</button>'
            + '</td></tr>';
        $('#example1 > tbody > tr:first').before(newRow);
    }

    function ok_add() {

        //get value from input has id = name
        var spend_name = $('input#spend_name').val();

        //get value from input has id = address
        var spend_value = $('input#spend_value').val();

        //get value from input has id = tel 
        var earn_name = $('input#earn_name').val();

           //get value from input has id = tel 
        var earn_value = $('input#earn_value').val();

        if(!earn_name) {
            alert("Thu không được để trống");
            return false;
        }

        if(!earn_value) {
            alert("Số tiền thu không được để trống");
            return false;
        }else {
            if(!$.isNumeric(earn_value) || earn_value < 0) {
                alert("Số tiền thu không đúng");
                return false;
            }
        }

        if(!spend_name) {
            alert("Chi không được để trống");
            return false;
        }

        if(!spend_value) {
            alert("Số tiền chi không được để trống");
            return false;
        }else {
            if(!$.isNumeric(spend_value) || spend_value < 0) {
                alert("Số tiền chi không đúng");
                return false;
            }
        }

        //data to submit
        var daily_report_detail = {
            earn_name: earn_name,
            earn_value : earn_value,
            spend_name : spend_name,
            spend_value: spend_value,
            dlp_id : dlp_id
        };

        //add new record
        $.ajax({
         type: "POST",
         url: base_url + "daily_report_detail/add_new", 
         data: daily_report_detail,
         dataType: "text",  
         cache : false,
         success: 
              function(json){
                alert('Thêm thành công!!!');
                var obj = jQuery.parseJSON(json);

                //add data row to database
                var dataRow = [
                    earn_name,
                    earn_value,
                    spend_name,
                    spend_value,
                    '<button id="' + obj['id'] + '" onclick="add()"'
                    + 'class="btn btn-primary btn-flat">Thêm</button><br/>'
                    + '<button onclick="edit(' + obj['id'] + ')"'
                    + 'class="btn btn-info btn-flat">&nbsp;&nbsp;Sửa&nbsp;&nbsp;'
                    + '</button><br/><button onclick="delete_row(' + obj['id'] + ')"'
                    + 'class="btn btn-danger btn-flat">&nbsp;&nbsp;Xóa&nbsp;&nbsp;'
                    + '</button>'
                ];

                //add row to data table
                var t = $('#example1').DataTable();
                
                t.row('#null').remove().draw();
                t.row.add(dataRow).draw();

                //add id for new row
                $('button#' + obj['id']).parent().parent().attr('id', obj['id']);

                earn_value_total += parseInt(earn_value);
                spend_value_total += parseInt(spend_value);

                //update earn total, spen total
                var update_data = {
                    id: dlp_id,
                    earn_total : earn_value_total,
                    spend_total : spend_value_total
                };

                $.ajax({
                     type: "POST",
                     url: base_url + "daily_report/edit_value_total", 
                     data: update_data,
                     dataType: "text",  
                     cache : false
                });

                //add row
                t.row('#total_row').remove().draw();

                var total_row = ['zzzzzzzzzzzzzzzzzzzzz', 
                    'Tổng thu: ' + earn_value_total,
                    '',
                    'Tổng chi: ' + spend_value_total,
                    ''];
                t.row.add(total_row).draw();

                $('#example1 > tbody > tr:last').attr('id', 'total_row');
                $('#example1 > tbody > tr:last').find('td:first').css({'text-indent' : '-99999px'});
              },
        error: function() {
                alert('Thêm thất bại!!!');
            }
        });
    }

    function cancle_add() {
        $('#example1 >tbody >tr:first').remove();
    }

    //---------------- end add datarow ---------------------------------------------
     
    //----------------- edit row ---------------------------------------------------    
    //edit data row
    function edit(id) {
        var earn_name = $('tr#' + id + ' > td:first').text();
        var earn_value = $('tr#' + id + ' > td:nth-child(2)').text();
        var spend_name = $('tr#' + id + ' > td:nth-child(3)').text();
        var spend_value = $('tr#' + id + ' > td:nth-child(4)').text();

        var newRow = '<tr id="new_row"><td><input'
            + ' type="text" id="earn_name" class="form-control" value="' + earn_name 
            +'"/>'
            + '</td><td><input type="text" id="earn_value" value="' + earn_value + '"'
            + ' class="form-control"/></td><td><input type="text" id="spend_name"'
            + ' class="form-control" value="' + spend_name + '"/></td>'
            + '<td><input type="text" id="spend_value"'
            + ' class="form-control" value="' + spend_value + '"/></td>'
            + '<td><button onclick="ok_edit(' + id + ')"'
            + 'class="btn btn-primary btn-flat">Đồng ý' 
            + '</button>&nbsp;&nbsp;<button onclick="cancle_edit(' + id + ')"'
            + 'class="btn btn-danger btn-flat">Hủy</button>'
            + '</td></tr>';

        $('#example1 > tbody').find('tr#' + id).hide();    
        $('#example1 > tbody > tr#' + id).before(newRow);
    }

    //ok edit
    function ok_edit(id) {
        //get value from input has id = name
        var spend_name = $('input#spend_name').val();

        //get value from input has id = address
        var spend_value = $('input#spend_value').val();

        //get value from input has id = tel 
        var earn_name = $('input#earn_name').val();

           //get value from input has id = tel 
        var earn_value = $('input#earn_value').val();

        if(!earn_name) {
            alert("Thu không được để trống");
            return false;
        }

        if(!earn_value) {
            alert("Số tiền thu không được để trống");
            return false;
        }else {
            if(!$.isNumeric(earn_value) || earn_value < 0) {
                alert("Số tiền thu không đúng");
                return false;
            }
        }

        if(!spend_name) {
            alert("Chi không được để trống");
            return false;
        }

        if(!spend_value) {
            alert("Số tiền chi không được để trống");
            return false;
        }else {
            if(!$.isNumeric(spend_value) || spend_value < 0) {
                alert("Số tiền chi không đúng");
                return false;
            }
        }

        //data to submit
        var daily_report_detail = {
            earn_name: earn_name,
            earn_value : earn_value,
            spend_name : spend_name,
            spend_value: spend_value,
            id : id
        };

        $.ajax({
         type: "POST",
         url: base_url + "daily_report_detail/edit", 
         data: daily_report_detail,
         dataType: "text",  
         cache : false,
         success: 
              function(json){
                alert('Cập nhật thành công!!!');

                //add data row to database
                var dataRow = [
                    earn_name,
                    earn_value,
                    spend_name,
                    spend_value,
                    '<button id="' + id + '" onclick="add()"'
                    + 'class="btn btn-primary btn-flat">Thêm</button><br/>'
                    + '<button onclick="edit(' + id + ')"'
                    + 'class="btn btn-info btn-flat">&nbsp;&nbsp;Sửa&nbsp;&nbsp;'
                    + '</button><br/>'
                    + '<button onclick="delete_row(' + id + ')"'
                    + 'class="btn btn-danger btn-flat">&nbsp;&nbsp;Xóa&nbsp;&nbsp;'
                    + '</button>'
                ];

                //add row to data table
                var t = $('#example1').DataTable();
                //remove old data
                t.row('#' + id).remove().draw();
                t.row.add(dataRow).draw();

                //add id for new row
                $('button#' + id).parent().parent().attr('id', id);

                  var earn = 0;
                  var spend = 0;
                  $('#example1 > tbody > tr').each(function() {
                    if(($(this).attr('id') != 'null') && ($(this).attr('id') != 'total_row')) {
                        var earn_value = $('tr#' + $(this).attr('id') + ' > td:nth-child(2)').text();
                        var spend_value = $('tr#' + $(this).attr('id') + ' > td:nth-child(4)').text();

                        earn += parseInt(earn_value);
                        spend += parseInt(spend_value);
                    }
                });


                //update earn total, spen total
                var update_data = {
                    id: dlp_id,
                    earn_total : earn,
                    spend_total : spend
                };

                $.ajax({
                     type: "POST",
                     url: base_url + "daily_report/edit_value_total", 
                     data: update_data,
                     dataType: "text",  
                     cache : false
                });

                //add row
                t.row('#total_row').remove().draw();

                var total_row = ['zzzzzzzzzzzzzzzzzzzzz', 
                    'Tổng thu: ' + earn,
                    '',
                    'Tổng chi: ' + spend,
                    ''];
                t.row.add(total_row).draw();

                $('#example1 > tbody > tr:last').attr('id', 'total_row');
                $('#example1 > tbody > tr:last').find('td:first').css({'text-indent' : '-99999px'});
        },
        error: function() {
            alert('Cập nhật thất bại!!!');
        }

        });
    }   

    function cancle_edit (id) {
        $('#example1 > tbody').find('tr#new_row').remove();    
        $('#example1 > tbody > tr#' + id).show();
    }

    //-------------------------------- end edit ----------------------------------
    //-------------------------------- delete -----------------------------------
    function delete_row (id) {
        if (confirm('Bạn có muốn xóa, thao tác này không thể phục hồi?')) {
            //data to submit
            var daily_report_detail = {
                id : id
            };

            $.ajax({
             type: "POST",
             url: base_url + "daily_report_detail/delete", 
             data: daily_report_detail,
             dataType: "text",  
             cache : false,
             success: 
                  function(json){
                    alert('Xóa thành công!!!');

                    //add row to data table
                   var t = $('#example1').DataTable();
                    var earn_value = $('tr#' + id + ' > td:nth-child(2)').text();

                    var spend_value = $('tr#' + id + ' > td:nth-child(4)').text();

                    earn_value_total -= parseInt(earn_value);
                    spend_value_total -= parseInt(spend_value);
                    t.row('#total_row').remove().draw();

                    var total_row = ['zzzzzzzzzzzzzzzzzzzzz', 
                        'Tổng thu: ' + earn_value_total,
                        '',
                        'Tổng chi: ' + spend_value_total,
                        ''];
                    t.row.add(total_row).draw();

                    $('#example1 > tbody > tr:last').attr('id', 'total_row');
                    $('#example1 > tbody > tr:last').find('td:first').css({'text-indent' : '-99999px'});

                    //remove old data
                    t.row('#' + id).remove().draw();

                    //check if database has no row
                    if($('#example1 > tbody').children('tr').length == 1) {
                        var dataRow = [
                            'Không có dữ liệu',
                            '',
                            '',
                            '',
                            '<button onclick="add()" class="btn btn-primary btn-flat">'
                            + 'Thêm</button><br/><button class="btn btn-info btn-flat"'
                            + ' disable>&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/>'
                            + '<button class="btn btn-danger btn-flat" disable>'
                            + '&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button>'
                        ];
                        t.row.add(dataRow).draw();

                        //remove old data
                        t.row('#' + id).remove().draw();

                        //add id for new row
                        $('#example1 >tbody>tr:first').attr('id', 'null');
                    }

                    var earn = 0;
                      var spend = 0;
                      $('#example1 > tbody > tr').each(function() {
                        if(($(this).attr('id') != 'null') && ($(this).attr('id') != 'total_row')) {
                            var earn_value = $('tr#' + $(this).attr('id') + ' > td:nth-child(2)').text();
                            var spend_value = $('tr#' + $(this).attr('id') + ' > td:nth-child(4)').text();

                            earn += parseInt(earn_value);
                            spend += parseInt(spend_value);
                        }
                    });


                    //update earn total, spen total
                    var update_data = {
                        id: dlp_id,
                        earn_total : earn,
                        spend_total : spend
                    };

                    $.ajax({
                         type: "POST",
                         url: base_url + "daily_report/edit_value_total", 
                         data: update_data,
                         dataType: "text",  
                         cache : false
                    });

                    //add row
                    t.row('#total_row').remove().draw();

                    var total_row = ['zzzzzzzzzzzzzzzzzzzzz', 
                        'Tổng thu: ' + earn,
                        '',
                        'Tổng chi: ' + spend,
                        ''];
                    t.row.add(total_row).draw();

                    $('#example1 > tbody > tr:last').attr('id', 'total_row');
                    $('#example1 > tbody > tr:last').find('td:first').css({'text-indent' : '-99999px'});

                },
            error: function() {
                    alert('Xóa thất bại!!!');
                }
            });
        }
    }
    
</script>
